<template>
	<div class="content">
		<el-form  size="default"  ref="ruleFormRef" :rules="rules" class="userInfoContent" :model="form" label-width="auto" style="max-width: 600px">
			<el-row :gutter="20">
				<el-col span="12">
					<el-form-item label="标题" prop="title">
					  <el-input v-model="form.title"  autofocus/>
					</el-form-item>
				</el-col>
				<el-col  span="12">
					<el-form-item label="类型" prop="type">
					  <el-select v-model="form.type" style="width: 200px;">
              <el-option v-for="item in notice_type" :value="item.dataValue" :label="item.dataName"></el-option>
            </el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row  :gutter="20">
				<el-col  span="12">
					<el-form-item label="状态" prop="status">
					  <el-switch v-model="form.status" active-value="1" inactive-value="0" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item label="内容" prop="content">
        <MavonEditor :content="form.content"  @contentData="contentData"  v-model="form.content"></MavonEditor>
			</el-form-item>
		</el-form>
	</div>
	<div>
    <el-button round  size="default"  plain icon="Edit"  style="margin-left:180px;border-color: white;margin-right:20px;" type="primary" @click="onSubmit(ruleFormRef)">保存</el-button>
    <el-button round  size="default"  plain icon="Refresh"  style="color: darkgray;margin-right:20px;"  @click="resetForm(ruleFormRef)" >重置</el-button>
    <el-button round  size="default"  plain type="info"  @click="close" >取消</el-button>
  </div>
</template>

<script lang="ts" setup>
  import MavonEditor from "@/components/MavonEditor/index.vue";
	import { reactive,ref, defineProps,toRefs,watchEffect,onMounted} from 'vue'
	import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
	import {info,update,save} from '@/api/notice.ts'
  import {useUserStore} from "@/stores/user.ts";
  const contentData=(obj)=>{
    form.content=obj.content;
    form.contentHtml=obj.contentHtml;
  }
  const userStore = useUserStore()
	const notice_type=userStore.getDictData('notice_type');
	const emit = defineEmits(['closeSaveDeptForm','success'])
	const props = defineProps(['deptId','parentId','t'])
	interface RuleForm {
	  id:any,
    title:string,
	  type:string,
	  content:string,
	  contentHtml:string,
	  status:string,
	}
	const ruleFormRef = ref<FormInstance>()
  const form = reactive<RuleForm>({
	  id:null,
    title:'',
    type:'',
    content:'',
    contentHtml:'',
    status:'1',
	})
	

	watchEffect(()=>{
		const t = props.t
	    console.log("t",t,props.deptId)
		if(props.deptId){
			info(props.deptId).then((res)=>{
				if(res.code === 200){
					form.id=res.data.id
					form.title=res.data.title
					form.type=res.data.type
					form.content=res.data.content
					form.contentHtml=res.data.contentHtml
					form.status=res.data.status
				}
			})
		}else{
      form.id=null
      form.title=''
      form.type=''
      form.content=''
      form.contentHtml=''
      form.status='1'
    }
	})
	
	const rules = reactive<FormRules<RuleForm>>({
		title:[{required:true,message:'标题不能为空',trigger:'blur'}],
		type:[{required:true,message:'类型不能为空',trigger:'blur'}],
		content:[{required:true,message:'内容不能为空',trigger:'blur'}],
	})
	
	
	const onSubmit =  (formEl: FormInstance | undefined) => {
	  if (!formEl) return
	  formEl.validate(async(valid, fields) => {
	    if (valid) {
	      console.log('submit!')
		  const code2 = ref();
		  if(form.id != null){
			  const {code} = await update(form);
			  code2.value=code
		  }else{
			  const {code} = await save(form);
			  code2.value=code
		  }
		  if(code2.value === 200){
			  ElMessage({
				  type:'success',
				  message:'保存成功'
			  })
        resetForm(ruleFormRef.value)
			  emit('success')
		  }
	    } else {
	      console.log('error submit!', fields)
	    }
	  })
	}
	
	const resetForm = (formEl: FormInstance | undefined) => {
	  if (!formEl) return
	  formEl.resetFields()
	}
	const close = ()=>{
		if(!props.deptId){
			  resetForm(ruleFormRef.value)
		}
		emit('closeSaveDeptForm')
	}
</script>

<style scoped>
	.content{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.userInfoContent{
		/* background-color: red; */
	}
</style>